<template>
  <div :class="['container', containerClass]" :style="containerStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Container',
  props: {
    /**
     * 容器类型
     * - 'page': 页面容器（默认）
     * - 'section': 区块容器
     * - 'modal': 模态框容器
     * - 'compact': 紧凑容器
     */
    type: {
      type: String,
      default: 'page',
      validator: (value) => ['page', 'section', 'modal', 'compact'].includes(value)
    },
    /**
     * 是否显示边框
     */
    bordered: {
      type: Boolean,
      default: false
    },
    /**
     * 背景色
     * - 'transparent': 透明背景（默认）
     * - 'white': 白色背景
     * - 'gray': 灰色背景
     * - 'dark': 深色背景
     * - 自定义颜色值（如 '#f0f0f0', 'rgba(0,0,0,0.1)'）
     */
    background: {
      type: String,
      default: 'transparent',
      validator: (value) => {
        // 允许预设值或任何有效的 CSS 颜色值
        const presets = ['white', 'gray', 'transparent', 'dark'];
        return presets.includes(value) || value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl');
      }
    },
    /**
     * 内边距大小
     * - 'none': 无内边距（0）
     * - 'xs': 超小（0.25rem）
     * - 'sm': 小（0.5rem）
     * - 'md': 中等（1rem，默认）
     * - 'lg': 大（1.5rem）
     * - 'xl': 超大（2rem）
     * - 自定义值（如 '20px', '1.5rem'）
     */
    padding: {
      type: String,
      default: null // null 表示使用 type 的默认 padding
    },
    /**
     * 外边距大小
     * - 'none': 无外边距（0）
     * - 'xs': 超小（0.25rem）
     * - 'sm': 小（0.5rem）
     * - 'md': 中等（1rem）
     * - 'lg': 大（1.5rem）
     * - 'xl': 超大（2rem）
     * - 'default': 默认（10px）
     * - 'auto': 自动居中
     * - 自定义值（如 '20px', '1.5rem'）
     */
    margin: {
      type: String,
      default: 'default' // 默认 10px
    },
    /**
     * 布局类型
     * - 'block': 块级元素（默认）
     * - 'flex': 弹性布局
     * - 'flex-nowrap': 弹性布局不换行
     * - 'grid': 网格布局
     * - 'inline-block': 内联块
     * - 'inline-flex': 内联弹性布局
     */
    layout: {
      type: String,
      default: 'block',
      validator: (value) => ['block', 'flex', 'flex-nowrap', 'grid', 'inline-block', 'inline-flex'].includes(value)
    },
    /**
     * 溢出处理
     * - 'auto': 自动（默认）
     * - 'hidden': 隐藏溢出
     * - 'visible': 显示溢出
     * - 'scroll': 滚动条
     */
    overflow: {
      type: String,
      default: 'auto',
      validator: (value) => ['auto', 'hidden', 'visible', 'scroll'].includes(value)
    }
  },
  computed: {
    containerClass() {
      const classes = {
        [`container--${this.type}`]: true,
        'container--bordered': this.bordered,
        [`container--${this.layout}`]: this.layout !== 'block',
        [`container--overflow-${this.overflow}`]: this.overflow !== 'auto'
      };
      
      // 只为预设的背景色添加 class
      if (['white', 'gray', 'dark'].includes(this.background)) {
        classes[`container--bg-${this.background}`] = true;
      }
      
      // 只为预设的 padding 值添加 class
      if (this.padding && ['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(this.padding)) {
        classes[`container--padding-${this.padding}`] = true;
      }
      
      // 只为预设的 margin 值添加 class
      if (this.margin && ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'default', 'auto'].includes(this.margin)) {
        classes[`container--margin-${this.margin}`] = true;
      }
      
      return classes;
    },
    
    containerStyle() {
      const style = {};
      
      // 自定义背景色（非预设值）
      if (this.background && !['white', 'gray', 'transparent', 'dark'].includes(this.background)) {
        style.backgroundColor = this.background;
      }
      
      // 自定义 padding（非预设值）
      if (this.padding && !['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(this.padding)) {
        style.padding = this.padding;
      }
      
      // 自定义 margin（非预设值）
      if (this.margin && !['none', 'xs', 'sm', 'md', 'lg', 'xl', 'default', 'auto'].includes(this.margin)) {
        style.margin = this.margin;
      }
      
      return style;
    }
  }
}
</script>

<style scoped>
.container {
  box-sizing: border-box;
  display: block;
  overflow: hidden; /* 防止任何溢出 */
  position: relative;
  margin: 10px; /* 默认外边距 */
  /* 不设置 width: 100%，让容器自动填充可用空间，减去 margin */
}

/* 页面容器 - 用于整个页面 */
.container--page {
  margin: 0; /* page 类型无外边距 */
  padding: 1rem;
  min-height: calc(100vh - 200px); /* 减去header和footer的高度 */
  position: relative;
  box-sizing: border-box;
}

/* 区块容器 - 用于页面内的区块 */
.container--section {
  padding: 1.5rem;
  margin: 0 0 1rem 0; /* section 类型只有底部外边距 */
  position: relative;
}

/* 模态框容器 - 用于模态框内容 */
.container--modal {
  padding: 2rem;
  margin: 0; /* modal 类型无外边距 */
  position: relative;
}

/* 紧凑容器 - 用于列表、表格等 */
.container--compact {
  padding: 1rem;
  margin: 0; /* compact 类型无外边距 */
  position: relative;
}

/* 边框样式 */
.container--bordered {
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

/* 背景色样式 */
.container--bg-white {
  background-color: white;
}

.container--bg-gray {
  background-color: #f8f9fa;
}

.container--bg-dark {
  background-color: #2f3136;
}

/* 布局工具类 */
.container--flex {
  display: flex;
  flex-wrap: wrap;
}

.container--flex-nowrap {
  display: flex;
  flex-wrap: nowrap;
}

.container--grid {
  display: grid;
}

.container--inline-block {
  display: inline-block;
}

.container--inline-flex {
  display: inline-flex;
}

/* Padding 尺寸控制 */
.container--padding-none {
  padding: 0 !important;
}

.container--padding-xs {
  padding: 0.25rem !important;
}

.container--padding-sm {
  padding: 0.5rem !important;
}

.container--padding-md {
  padding: 1rem !important;
}

.container--padding-lg {
  padding: 1.5rem !important;
}

.container--padding-xl {
  padding: 2rem !important;
}

/* Margin 尺寸控制 */
.container--margin-none {
  margin: 0 !important;
}

.container--margin-xs {
  margin: 0.25rem !important;
}

.container--margin-sm {
  margin: 0.5rem !important;
}

.container--margin-md {
  margin: 1rem !important;
}

.container--margin-lg {
  margin: 1.5rem !important;
}

.container--margin-xl {
  margin: 2rem !important;
}

.container--margin-default {
  margin: 10px !important;
}

.container--margin-auto {
  margin: 0 auto !important;
}

/* 溢出处理 */
.container--overflow-hidden {
  overflow: hidden;
}

.container--overflow-visible {
  overflow: visible;
}

.container--overflow-scroll {
  overflow: scroll;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container--page {
    padding: 0.5rem;
  }
  
  .container--section {
    padding: 1rem;
  }
  
  .container--modal {
    padding: 1.5rem;
  }
  
  .container--compact {
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .container--page {
    padding: 0.25rem;
  }
  
  .container--section {
    padding: 0.75rem;
  }
  
  .container--modal {
    padding: 1rem;
  }
  
  .container--compact {
    padding: 0.5rem;
  }
}
</style>
